<template>
    <div class="user-info">
         <div class="info-wrap">
             <div class="info-item">
                 <div class="gold-wrap">
                     <span class="gold-icon"></span>
                     <span class="gold-num">90个</span>
                 </div>
                 <div class="gold-wrap">
                     <span class="gold-icon silver-icon"></span>
                     <span class="gold-num">120个</span>
                 </div>
                 <div class="rank-num-wrap">
                     <div class="rank-num">20名</div>
                     <router-link class="target-rank" to="rank" tag="span">查看排行</router-link>
                 </div>
             </div>
             <div class="info-item">
                 <div class="user-avatar-wrap">
                     <div class="user-avatar">
                         <img src="./../assets/avator.jpg" alt="">
                     </div>
                     <p class="level-name">顽强青铜Lv.1</p>
                 </div>
             </div>
             <div class="info-item">
                 <div class="name-wrap">
                     <div class="text-item">
                         <span class="text">20145</span>
                         <span class="name-icon">人</span>
                     </div>
                     <div class="text-item">
                         <span class="text">莫失莫忘</span>
                         <span class="name-icon">男</span>
                     </div>
                     <button class="choose-btn">暂无徽章</button>
                 </div>
             </div>
         </div>
    </div>
</template>

<script>
    export default {
        name: "userInfo",
        data(){
            return {

            }
        },
        methods:{

        }
    }
</script>

<style scoped lang="less">
    .user-info{
        height: 3.2rem;
        background: linear-gradient(#2256cd,#55aafd);
        border-radius:0.1rem;
        overflow: hidden;
        padding: 0.3rem 0.3rem 0;
        color: #fff;
        .info-wrap{
            height: 100%;
            display: flex;
            align-items: stretch;
            .info-item{
                flex: 1;
            }
        }
    }
    .gold-wrap{
        margin-bottom: 0.15rem;
        font-size: 0;
        line-height: 1;
        .gold-icon{
            display: inline-block;
            width: 0.35rem;
            height: 0.35rem;
            background-color: #ff6400;
            border-radius:50%;
            overflow: hidden;
            margin-right: 0.1rem;
            vertical-align: bottom;
            &.silver-icon{
                background-color: #94b7cb;
            }
        }
        .gold-num{
            font-size: 0.3rem;
        }
    }
    .rank-num-wrap{
        margin-top: 0.8rem;
        font-size: 0.3rem;
        .rank-num{
            height: 0.5rem;
            width: 1.5rem;
            line-height: 0.5rem;
            text-align: center;
            background: linear-gradient(to right, #4e56e2, rgba(84, 150, 226, 0.71));
            position: relative;
            &:after{
                content: '';
                position: absolute;
            }
        }
        .target-rank{
            display: inline-block;
            width: 1.5rem;
            text-align: center;
            text-decoration: underline;
        }
    }
    .user-avatar-wrap{
        text-align: center;
        padding-top: 0.3rem;
        .user-avatar{
            width: 1.6rem;
            height: 1.6rem;
            display: inline-block;
            border: 0.1rem solid #fff;
            overflow: hidden;
            border-radius:50%;
        }
        .level-name{

            color: #edf9c2;
            font-size: 0.35rem;
        }
    }
    .name-wrap{
        text-align: right;
        .text{
            font-size: 0.35rem;
            margin-right: 0.1rem;
        }
        .choose-btn{
            line-height: 1;
            width: 1.5rem;
            height: 0.5rem;
            font-size: 0.25rem;
            background: linear-gradient(#16cffd,#03b0fb);
            border-radius: 0.3rem;
            color: #fff;
            margin-top: 0.8rem;
            box-shadow: 0 3px 3px #0377aa;

        }
    }
</style>
